<template>
  <div class="main">
    <classify />
    <goods-list />
    <suspend-cart />
  </div>
</template>

<script>
import GoodsList from '@/components/GoodsList'
import SuspendCart from '@/components/SuspendCart.vue'
import Classify from '@/components/Classify.vue'
import { seachClassify } from '@/api/api.js'
import VueEvent from '@/js/mitt.js'
import { ref, onMounted } from 'vue'
export default {
  components: { GoodsList, SuspendCart, Classify },
  setup () {
    const sort = ref('男装')
    onMounted(() => {
      VueEvent.emit('flag', false)
      seachClassify('get', sort.value).then((res) => {
        console.log(res.data)
        VueEvent.emit('goodsInfo', res.data)
      })
    })

    VueEvent.on('classify', (info) => {
      sort.value = info
      seachClassify('get', sort.value).then((res) => {
        console.log(res.data)
        VueEvent.emit('goodsInfo', res.data)
      })
    })

    return {}
  }
}
</script>

<style l,
    ClassifyCarouselang="scss" scoped>
.main {
  margin: 0 auto;
  width: 70%;
  height: 100%;
  min-height: 230px;
  min-width: 1090px;
  margin: 0 auto;
  border-radius: 15px;
  background-color: #dcdcdc;
  padding-top: 15px;
}
</style>
